/*
 * @Author: your name
 * @Date: 2021-12-11 10:32:26
 * @LastEditTime: 2021-12-11 12:01:48
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Vue\12.11vue\webpack.config.js
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar=require('webpackbar');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const Mock=require('mockjs')
const data=Mock.mock({
  "list|5":[{
    img:"@image(100x100,@color)",
    num:1,
    name:"@cname"
  }]
})
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[hash].main.js",
    clean:true
  },
  plugins: [
      new HtmlWebpackPlugin({
          template:"./src/index.html"
      }),
      new MiniCssExtractPlugin(),
      new WebpackBar(),
      new UglifyJsPlugin(),
      new VueLoaderPlugin()
    ],
    module: {
        rules: [
          {
            test: /\.(sass|less|css|scss)$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              MiniCssExtractPlugin.loader,
              // 将 CSS 转化成 CommonJS 模块
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 30*1024,
                }
              },
            ],
           type: 'javascript/auto'
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {}
              },
            ],
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ],
      },
      devServer:{
          host:"localhost",
          port:8081,
          open:true,
          hot:true,
          before(app){
            app.get('/list',(req,res)=>{
              res.send(data.list)
            })
          }
      },
      devtool:"source-map"
};